<style scoped>
    html,
    body,
    #app {
        height: 100%;
    }

    #app {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        /* background-image: url(../../assets/loginBg.png); */
        background: linear-gradient(to bottom, rgba(0, 162, 255, 0.897), rgba(0, 132, 255, 0.945));
    }

    .loginCard {
        width: 100%;
        padding: 20px 10px 10px 10px;
        border-top: 6px solid #2b85e4;
    }

    .loginCard div {
        text-align: center;
    }

    .loginCard div img {
        margin-bottom: 10px;
    }

    .loginCard div p {
        color: #2d8cf0;
        font-size: 18px;
        letter-spacing: 2px;
        font-weight: bolder;
        margin-bottom: 15px;
    }
</style>
<template>
    <div class="layout" id='app'>
        <Row style="margin-top:9%;margin-bottom: 2%;">
            <Col span="13" offset="1">
            <img src="../../assets/login.png" style="width: 100%; margin: auto 0;">
            </Col>
            <Col span="5" offset="3">
            <Card class="loginCard">
                <div>
                    <img src="../../assets/logo.png" style="width: 50%;"/>
                    <p style="font-family: YouYuan;">语云数据中间件1.0</p>
                    <Input placeholder="用户名" v-model="loginForm.account" style="margin-bottom: 15px;">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                    <Input placeholder="密码" v-model="loginForm.password" type="password" style="margin-bottom: 30px;"
                        @keyup.enter.native="login">
                    <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </Input>
                    <!-- <router-link to='/home'>
                        <Button type="primary" style="width: 60%;margin-bottom: 10px;">登录</Button>
                    </router-link> -->
                    <Button type="primary" style="width: 60%;margin-bottom: 10px;" @click="login" id='login'>登录</Button>
                    <router-link to='/findPassword'>
                        <Button type="text" style="width: 60%;">找回密码</Button>
                    </router-link>
                </div>
            </Card>
            </Col>
        </Row>
        <Footer style="text-align: center;background: transparent;color: white;">
            版权所有：北京语云科技有限公司
        </Footer>
    </div>
</template>
<script>
    import { mapMutations } from 'vuex'
    import zmitiUtil from '../../lib/util'
    import axios from 'axios'
    export default {
        data() {
            return {
                loginForm: {
                    account: '',
                    password: ''
                },
                token: '',
                baseurl:zmitiUtil.baseURL
            }
        },
        methods: {
            ...mapMutations(['changeLogin','changeUserInfo']),
            login() {
                let _this = this;
                if (this.loginForm.account === '' || this.loginForm.password === '') {
                    this.$Message.error('账号或密码不能为空')
                } else {          
                        var path='user/login';
                        var postData = {
                            account: _this.loginForm.account,
                            password: _this.loginForm.password
                        }
                        axios({
                            method: 'post',
                            url: zmitiUtil.baseURL+'/'+path,
                            data: postData,
                            headers: {
                              "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
                            },
                        }).then(response => {
                            let res = response.data
                            console.log(res)  
                            if(response.status==200){
                                let login={
                                    token:res.token,
                                    account:_this.loginForm.account,
                                    key:res.key
                                }
                                window.localStorage.setItem("login", JSON.stringify(login));
                                _this.changeLogin({ Authorization: res.token });
                                _this.changeUserInfo({userInfo:_this.loginForm.account});
                                _this.$router.push('/home');
                            }else{
                                this.$Message.error('登录失败');
                            }
                        })
                        /*zmitiUtil.Ajax(path,postData).then(res => {
                            var data = res.data;
                            console.log(data,'data')
                            if(res.data.code==1){
                                _this.changeLogin({ Authorization: res.data.code });
                                _this.changeUserInfo({userInfo:_this.loginForm.account})
                                _this.$router.push('/home');
                            }else{
                                this.$Message.error(res.data.result);
                            }
                        }).catch((error) => {
                            console.log(error,'error');
                        });*/
                }
            }
        }
    }
</script>